<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" import="java.util.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优家论坛</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/body.css">
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap.min.css">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <style>
        * {padding: 0;margin: 0;font-family: "微软雅黑";font-size: 14px;}
    ul,li {list-style: none;}
    a {text-decoration: none;color: black;}
        .container {
            position: relative;
            width: 600px;
            height: 332px;
            margin: 20px 0 0 195px;
            box-shadow: 0 0 5px green;
            overflow: hidden;
        }
        .container .wrap {
            position: absolute;
            width: 4200px;
            height: 400px;
            z-index: 1;
        }
        .container .wrap img {
            float: left;
            width: 600px;
            height: 400px;
        }
        .container .buttons {
            position: absolute;
            right: 5px;
            bottom:40px;
            width: 150px;
            height: 10px;
            z-index: 2;
        }
        .container .buttons span {
            margin-left: 5px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: honeydew;
            text-align: center;
            color:dodgerblue;
            cursor: pointer;
        }
        .container .buttons span.on{
            background-color: red;
        }
        .container .arrow {
            position: absolute;
            top: 35%;
            color:#bce8f1;
            padding:0px 14px;
            border-radius: 50%;
            font-size: 50px;
            z-index: 2;
            display: none;
        }
        .container .arrow_left {
            left: 10px;
        }
        .container .arrow_right {
            right: 10px;
        }
        .container:hover .arrow {
            display: block;
        }
        .container .arrow:hover {
            background-color: rgba(0,0,0,0.2);
        }
        .forummid{
            width: 100%;
        }
    </style>

</head>
<body>
<jsp:include page="hd.jsp"></jsp:include>
<script type="text/javascript">
    function changeimgziover1() {
        var homePage=document.getElementById("homePage");
        var img_1=document.getElementById("img_1");
        var zi_1=document.getElementById("zi_1");
        img_1.style.backgroundPosition=("1px 1px")?("1px -22px"):("1px 1px");
        zi_1.style.color="red";
    }
    function changeimgziout1() {
        var homePage=document.getElementById("homePage");
        var img_1=document.getElementById("img_1");
        var zi_1=document.getElementById("zi_1");
        img_1.style.backgroundPosition=("1px -22px")?("1px 1px"):("1px -22px");
        zi_1.style.color="black";
    }
    function changeimgziover2() {
        var jzCenter=document.getElementById("jzCenter");
        var img_2=document.getElementById("img_2");
        var zi_2=document.getElementById("zi_2");
        img_2.style.backgroundPosition=("-24px 0px")?("-24px -23px"):("-24px 0px");
        zi_2.style.color="red";
    }
    function changeimgziout2() {
        var jzCenter=document.getElementById("jzCenter");
        var img_2=document.getElementById("img_2");
        var zi_2=document.getElementById("zi_2");
        img_2.style.backgroundPosition=("-24px -23px")?("-24px 0px"):("-24px -23px");
        zi_2.style.color="black";
    }

    function changeimgziover3() {
        var findDecoration=document.getElementById("findDecoration");
        var img_3=document.getElementById("img_3");
        var zi_3=document.getElementById("zi_3");
        img_3.style.backgroundPosition=("-48px 0px")?("-48px -23px"):("-48px 0px");
        zi_3.style.color="red";
    }
    function changeimgziout3() {
        var findDecoration=document.getElementById("findDecoration");
        var img_3=document.getElementById("img_3");
        var zi_3=document.getElementById("zi_3");
        img_3.style.backgroundPosition=("-48px -23px")?("-48px 0px"):("-48px -23px");
        zi_3.style.color="black";
    }

    function changeimgziover4() {
        var strategy=document.getElementById("strategy");
        var img_4=document.getElementById("img_4");
        var zi_4=document.getElementById("zi_4");
        img_4.style.backgroundPosition=("-73px 0px")?("-73px -23px"):("-73px 0px");
        zi_4.style.color="red";
    }
    function changeimgziout4() {
        var strategy=document.getElementById("strategy");
        var img_4=document.getElementById("img_4");
        var zi_4=document.getElementById("zi_4");
        img_4.style.backgroundPosition=("-73px -23px")?("-73px 0px"):("-73px -23px");
        zi_4.style.color="black";
    }
</script>
<div class="forummid">
    <div class="body">
        <div class="body_top">
            <div class="container">
                <div class="wrap" style="left: -600px;">
                    <a href="#"><img src="../img_running/5.jpg" height="387" width="700"/></a>
                    <a href="#"><img src="../img_running/1.jpg" height="220" width="293"/></a>
                    <a href="#"><img src="../img_running/2.jpg" height="220" width="318"/></a>
                    <a href="#"><img src="../img_running/3.jpg" height="220" width="351"/></a>
                    <a href="#"><img src="../img_running/4.jpg" height="220" width="293"/></a>
                    <a href="#"><img src="../img_running/5.jpg" height="387" width="700"/></a>
                    <a href="#"><img src="../img_running/1.jpg" height="220" width="293"/></a>
                </div>
                <div class="buttons">
                    <span class="on">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_left"><</a>
                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_right">></a>
            </div>
            <script>
                var wrap = document.querySelector(".wrap");
                var next = document.querySelector(".arrow_right");
                var prev = document.querySelector(".arrow_left");
                next.onclick = function () {
                    next_pic();
                }
                prev.onclick = function () {
                    prev_pic();
                }
                function next_pic () {
                        index++;
                    if(index > 4){
                        index = 0;
                    }
                    showCurrentDot();
                    var newLeft;
                    if(wrap.style.left === "-3600px"){
                        newLeft = -1200;
                    }else{
                        newLeft = parseInt(wrap.style.left)-600;
                    }
                    wrap.style.left = newLeft + "px";
                }
                function prev_pic () {
                    index--;
                    if(index < 0){
                        index = 4;
                    }
                    showCurrentDot();
                    var newLeft;
                    if(wrap.style.left === "0px"){
                        newLeft = -2400;
                    }else{
                        newLeft = parseInt(wrap.style.left)+600;
                    }
                    wrap.style.left = newLeft + "px";
                }
                var timer = null;
                function autoPlay () {
                    timer = setInterval(function () {
                        next_pic();
                    },2000);
                }
                autoPlay();

                var container = document.querySelector(".container");
                container.onmouseenter = function () {
                    clearInterval(timer);
                }
                container.onmouseleave = function () {
                    autoPlay();
                }

                var index = 0;
                var dots = document.getElementsByTagName("span");
                function showCurrentDot () {
                    for(var i = 0, len = dots.length; i < len; i++){
                        dots[i].className = "";
                    }
                    dots[index].className = "on";
                }

                for (var i = 0, len = dots.length; i < len; i++){
                    (function(i){
                        dots[i].onclick = function () {
                            var dis = index - i;
                            if(index == 4 && parseInt(wrap.style.left)!==-3000){
                                dis = dis - 5;
                            }

                            if(index == 0 && parseInt(wrap.style.left)!== -600){
                                dis = 5 + dis;
                            }
                            wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px";
                            index = i;
                            showCurrentDot();
                        }
                    })(i);
                }
            </script>
        </div>
        <div class="body_top_right_1">
            <a href="#"><img src="../img_running/6.jpg" height="425" width="380"/></a>
        </div>
        <div class="body_top_right_2">
            <a href=""><img src="../img_running/7.jpg" height="387" width="700"/></a>
        </div>
        <div class="body_center_c">
            <div class="body_center_c_top">
                <div>
                    <div>
                        <h3><img src="../img_running/8.png" height="24" width="24"/>
                        <a href="#">不知道标题的文章</a></h3>
                    </div>
                    <div>
                        <a href="#">作者:某人</a>
                    </div>
                    <p>文章的内容</p><br><br><br><br>
                </div>
                <div>
                    <div>
                        <h3><img src="../img_running/8.png" height="24" width="24"/>
                            <a href="#">不知道标题的文章</a></h3>
                    </div>
                    <div>
                        <a href="#">作者:某人</a>
                    </div>
                    <p>文章的内容</p><br><br><br><br>
                </div>
                <div>
                    <div>
                        <h3><img src="../img_running/8.png" height="24" width="24"/>
                            <a href="#">不知道标题的文章</a></h3>
                    </div>
                    <div>
                        <a href="#">作者:某人</a>
                    </div>
                    <p>文章的内容</p><br><br><br><br>
                </div>
            </div>
            <div class="body_center_c_down">
                <div>
                    <h3><img src="../img_running/10.png" height="24" width="24"/>
                        <a href="#">精品装修鉴赏</a></h3>
                </div>
                <div>
                    <a href="#"><img src="../img_running/9.jpg" height="501" width="770"/></a>
                </div>
            </div>
        </div>
        <div class="body_center_right">
            <aside class="span4 page-sidebar">

                <section class="widget">
                    <div class="support-widget">
                        <h3 class="title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">咨询</font></font></h3>
                        <p class="intro"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">需要更多帮助吗？</font>
                            <font style="vertical-align: inherit;">如果您找不到你想知道的,请咨询客服</font></font></p>
                    </div>
                </section>

                <section class="widget">
                    <h3 class="title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">精选帖子</font></font></h3>
                    <ul class="articles">
                        <li class="article-entry standard">
                            <h4><a href="single.html"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">帖子</font></font></a></h4>
                            <span class="article-meta"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2013年2月25日</font></font><a href="#" title="查看服务器和数据库中的所有帖子"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">服务器和数据库</font></font></a></span>
                        </li>
                        <li class="article-entry standard">
                            <h4><a href="single.html"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">帖子</font></font></a></h4>
                            <span class="article-meta"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2013年2月24日</font></font><a href="#" title="查看网站开发中的所有帖子"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">网站开发</font></font></a></span>

                        </li>
                        <li class="article-entry video">
                            <h4><a href="single.html"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">帖子</font></font></a></h4>
                            <span class="article-meta"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2013年2月23日</font></font><a href="#" title="查看网站开发中的所有帖子"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Website Dev</font></font></a></span>

                        </li>
                        <li class="article-entry image">
                            <h4><a href="single.html"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">帖子</font></font></a></h4>
                            <span class="article-meta"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2013年2月22日</font></font><a href="#" title="查看“高级技术”中的所有帖子"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Advanced Techniques</font></font></a></span>

                        </li>
                    </ul>
                </section>

                <section class="widget"><h3 class="title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">分类</font></font></h3>
                    <ul>
                        <li><a href="#" title="Lorem ipsum dolor坐在amet，"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">推荐</font></font></a> </li>
                        <li><a href="#" title="Lorem ipsum dolor坐在amet，"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">关注</font></font></a></li>
                        <li><a href="#" title="Lorem ipsum dolor坐在amet，"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">家装人生</font></font></a></li>
                        <li><a href="#" title="Lorem ipsum dolor坐在amet， "><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">个性装修</font></font></a></li>
                        <li><a href="#" title="Lorem ipsum dolor坐在amet，"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">装修采购</font></font></a></li>
                        <li><a href="#" title="Lorem ipsum dolor坐在amet，"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">我的回复</font></font></a></li>
                        <li><a href="#" title="Lorem ipsum dolor坐在amet， "><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">社区</font></font></a></li>
                        <li><a href="#" title="Lorem ipsum dolor坐在amet， "><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">其他</font></font></a></li>
                    </ul>
                </section>

                <section class="widget">
                    <h3 class="title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">最近评论</font></font></h3>
                    <ul id="recentcomments">
                        <li class="recentcomments"><a href="#" rel="external nofollow" class="url"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">John Doe</font></font></a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">关于</font></font><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">将WordPress与您的网站集成</font></font></a></li>
                        <li class="recentcomments"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">saqib sarwar关于</font></font><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">将WordPress与您的网站集成</font></font></a></li>
                        <li class="recentcomments"><a href="#" rel="external nofollow" class="url"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">John Doe</font></font></a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">关于</font></font><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">将WordPress与您的网站集成</font></font></a></li>
                        <li class="recentcomments"><a href="#" rel="external nofollow" class="url"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">WordPress先生介绍</font></font></a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">如何</font></font><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">安装WordPress</font></font></a></li>
                    </ul>
                </section>
            </aside>
        </div>
    </div>
    <div id="foot_body">
        <div class="jia_foot_info">
            <div class="jia_foot_con">
                <p class="jia_foot_link">
                    <a href="#" rel="nofollow" target="_blank">关于我们</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" rel="nofollow">联系我们</a><span class="jia_split">|</span>
                    <a href="#" rel="nofollow">媒体报道</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" rel="nofollow">法律声明</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" rel="nofollow">企业文化</a><span class="jia_split">|</span>
                    <a href="http://www.qeeka.com" target="_blank" rel="nofollow">投资者关系</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" rel="nofollow">入驻装修平台</a><span class="jia_split">|</span>
                    <a href="#" tjjj="sjrz.2" target="_blank" rel="nofollow">零售合作</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" rel="nofollow">诚聘英才</a><span class="jia_split">|</span>
                    <a href="#" target="_blank">网站地图</a><span class="jia_split">|</span>
                    <a href="#" tjjj="bottom.link.help">帮助中心</a><span class="jia_split">|</span>
                    <a href="#" tjjj="bottom.link.help">营业执照</a><span class="jia_split">|</span>
                    <a href="javascript:;" class="jia_foot_open">更多<i></i></a>
                </p>
                <p class="jia_foot_link footnone">
                    <a href="#" target="_blank" tjjj="footer.bottom.1">找装修公司</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" tjjj="footer.bottom.2">买建材家居</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" tjjj="footer.bottom.4">家居百科</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" tjjj="footer.bottom.5">装修公司库</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" tjjj="footer.bottom.7">产品信息库</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" tjjj="footer.bottom.9">装修知识</a><span class="jia_split">|</span>
                    <a href="#" tjjj="2014.foot.jiajupic">家居效果图</a><span class="jia_split">|</span>
                    <a href="#" tjjj="2014.foot.wangpu">店铺大全</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" tjjj="footer.bottom.8">品牌库</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" tjjj="footer.bottom.12">找小区</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" tjjj="footer.bottom.10">建材加盟</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" tjjj="footer.bottom.11">装修效果图</a><span class="jia_split">|</span>
                    <a href="#" target="_blank" tjjj="footer.bottom.12">婚庆</a>
                </p>
            </div>
            <p>
                优家网 版权所有
            </p>
            <p>
                中国互联网协会信用评价中心网信认证 网信编码:1664391091 举报电话：021-69108618
            </p>
            <p>
                <a href="//oneimg1.jia.com/content/public/resource/image/tg_home/yiye.gif">
                    <img src="//oneimg1.jia.com/content/public/resource/image/tg_home/gov-inco.jpg" border="0" width="40" height="44">
                </a>
                <a href="/#" target="_blank" style="margin-left:15px;">
                    <img src="//fastued3.jia.com/image/common/315.gif" border="0">
                </a>
            </p>
        </div>
    </div>
</div>
</body>
</html>